<template>
  <div :data="data" ref="chart"></div>
</template>
<script>
import walden from "@/assets/js/walden.js";
import { getProvinceMapInfo } from "@/utils/map_utils";
import axios from "axios";
export default {
  props: ["id", "data"],
  data() {
    return {
      ChartLineGraph: null,
      mapData: {}, //所获取的省份的地图矢量数据
    };
  },
  watch: {
    data: {
      handler(newValue, oldValue) {
        // this.drawLineGraph(this.id, newValue)
        this.setOption(newValue);
        
      },
      deep: true,
    },
  },
  mounted() {
    this.drawLineGraph(this.id, this.data);
  },
  methods: {
    drawLineGraph(id, data) {
      // eslint-disable-next-line no-unused-vars
      let _this = this;
      if (this.$refs.chart) {
        //   let muChart = document.getElementById(id)
        this.ChartLineGraph = this.$echarts.init(this.$refs.chart, "walden");
        //   this.ChartLineGraph.setOption(data)
        this.setOption(data);
      }
      window.addEventListener("resize", function () {
        _this.ChartLineGraph.resize();
      });
    },
    setOption(data) {
      console.log("handle");
      this.ChartLineGraph.setOption(data);
    },
    changeProvince() {
      this.ChartLineGraph.on("click", async (arg) => {
        console.log(arg, "changeProcv");
        if (this.ChartLineGraph) {
          this.ChartLineGraph.clear();
        }
        //arg.name 得到所点击的省份，这个省份是中文
        const provinceInfo = getProvinceMapInfo(arg.name);
        console.log(provinceInfo);
        // 需要获取这个获胜的地图矢量数据
        // 判断当前所点击的这个省份的地图数量数据
        if (provinceInfo.key == undefined) {
          alert("没有进一步数据了");
          return false;
        } else {
          if (!this.mapData[provinceInfo.key]) {
            const res = await axios.get(
              "http://localhost:8080" + provinceInfo.path
            );
            console.log(res.data);
            this.mapData[provinceInfo.key] = res.data;
            this.$echarts.registerMap(provinceInfo.key, res.data);
            const changeOption = {
              geo: {
                map: provinceInfo.key,
              },
            };

            this.ChartLineGraph.setOption(changeOption);
          }
        }
      });
    },
    closeOption() {
      this.ChartLineGraph.clear();
    },
  },
  beforeDestroy() {
    if (this.ChartLineGraph) {
      this.ChartLineGraph.clear();
    }
  },
  components: {},
};
</script>

<style scoped>
</style>
